<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="options" :columns="columns" ref="crudRef">
      <template #tableBeforeButtons="{ record }">
          <a-button type="primary" @click="handleXinzengs"> 新增</a-button>
      </template>
      <template #operationBeforeExtend="{ record }">
          <a-popconfirm content="是否确定复制？" @ok="handleClone(record)">
            <a-link >一键复制</a-link>
          </a-popconfirm>
          <a-button type="text" size="mini" @click="handleEdits(record)"> 编辑</a-button>
      </template>
      <template #zc_time="{record}">
        <a-tooltip :content="`${record.start_time} ~ ${record.end_time}`">
          <div>
            {{ record.start_time }} ~ {{ record.end_time }}
          </div>
        </a-tooltip>
        
      </template>
    </ma-crud>
    <a-modal :mask-closable="false"  v-model:visible="showAdd" :title="addType == 1?'新增':'编辑'" @cancel="showAdd = false" :width="1300" :on-before-ok="handleBeforeOk"  >
      <div style="max-height:600px;" v-if="showAdd">
        <div style="display:flex;margin-bottom: 2%;">
          <div style="width: 100px;">政策名称：</div>
          <a-input  style="width: 380px;" v-model="formData.name" placeholder="请输入政策名称" allow-clear  />
        </div>
        <div style="display:flex;margin-bottom: 2%;">
          <div style="width: 100px;">有效期：</div>
          <a-range-picker
            showTime
            :defaultValue="formData.zc_time"
            @ok="handleTimeOk"
            style=" width: 380px; "
          />
        </div>
        <div style="display:flex;margin-bottom: 2%;">
          <div style="width: 100px;">优惠品类：</div>
          <a-select v-model="formData.goods_type" :style="{width:'380px'}" placeholder="请选择优惠品类" @change="handleChange($event,1)">
            <a-option v-for="item of pinleiArr" :value="item.id" :label="item.name" />
          </a-select>
        </div>
        <div style="display:flex;margin-bottom: 2%;">
          <div style="width: 100px;">优惠品名：</div>
          <a-select v-model="formData.goods_arr" multiple  :style="{width:'380px'}" placeholder="请选择优惠品名" @change="handleChangePinMing">
            <a-option v-for="item of pinmingArr" :value="item.id" :label="item.name" />
          </a-select>
        </div>
        <div style="display:flex;margin-bottom: 2%;">
          <div style="width: 100px;">计费重量：</div>
          <!-- :disabled="inforow.transport_type == 2?true:false" -->
          <a-radio-group v-model="formData.weight_type" :options="weightTypeList" >
            <template #label="{ data }">
              <div>{{ data.title }}</div>
            </template>
          </a-radio-group>
        </div>
        <div style="display:flex;margin-bottom: 2%;">
          <div style="width: 100px;">政策状态：</div>
          <a-radio-group v-model="formData.zc_status" :options="zc_statusList" />
        </div>
        <div style="display:flex;margin-bottom: 2%;" class="align_center" v-for="(item,index) in formData.price_config" v-key="index" >
          <div style="width: 80px;margin-right: 20px" class="flex justify_end" @click="handleRadio(index)">
            <div style="width: 15px;height: 15px;border-radius: 4px;" class="flex align_center justify_center" :class="item.flag?'actRadio':'Radio'">
              <icon-check v-if="item.flag" />
            </div>
          </div>
          <div :class="item.flag?'actPriceBox':'priceBox'">
            <div style="margin-bottom: 2%;font-weight: 600">{{ item.name }}</div>
            <div v-for="(items,indexs) in item.data" :key="indexs">
                <div class="flex align_center" style="margin-bottom: 2%;" v-if="items.transport_type == 2">
                    <div style="width: 80px;">整车：</div>
                    <div class="flex align_center">
                        <a-input v-model="items.price" style="width: 100px;" placeholder="金额" allow-clear  />
                        <div style="margin: 0 12px;"> 元/ </div>
                        <a-select v-model="items.unit" style="width: 100px;" placeholder="单位">
                            <a-option v-for="ite of zhengcheUnitList" :value="ite.id" :label="ite.name"  />
                        </a-select>
                    </div>
                </div>
                <div class="flex " style="margin-bottom: 2%;" v-if="items.transport_type == 1">
                    <div style="width: 80px;">集装箱：</div>
                    <div class="flex align_end flex_1">
                        <div class="flex align_center" v-for="(ite,index) in items.box" :key="index" style="margin-right: 80px;">
                            <div style="margin-right:12px;"> {{ ite.box_size == 1?'20英尺':'40英尺' }} </div>
                            <a-input v-model="ite.price" style="width: 100px;margin-left: 12px;" placeholder="金额" allow-clear  />
                            <div style="margin: 0 12px;"> 元/ </div>
                            <a-select v-model="ite.unit" style="width: 100px;" placeholder="单位">
                                <a-option v-for="it of unitList" :value="it.id" :label="it.name"  />
                            </a-select>
                        </div>
                    </div>
                </div>
                <div class="flex align_center" v-if="items.transport_type == 3">
                    <div style="width: 80px;">批量快运：</div>
                    <div class="flex align_center">
                        <a-input v-model="items.price" style="width: 100px;" placeholder="金额" allow-clear  />
                        <div style="margin: 0 12px;"> 元/ </div>
                        <a-select v-model="items.unit" style="width: 100px;" placeholder="单位">
                            <a-option v-for="ite of zhengcheUnitList" :value="ite.id" :label="ite.name"  />
                        </a-select>
                        
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive,onMounted } from 'vue'
import systemZc from '@/api/system/systemZc'
import { Message } from '@arco-design/web-vue'
import tool from '@/utils/tool'
import * as common from '@/utils/common'
import commonApi from "@/api/common";
import { request } from "@/utils/request.js";
const crudRef = ref()
const showAdd = ref(false)
const unitList = ref([])
const zhengcheUnitList = ref([
        {id: 1,name: "吨"},
        {id: 2,name: "车"},
        {id: 5,name: "吨/天"},
        {id: 6,name: "车/天"},
        {id: 8,name: "车/小时"},
        {id: 9,name: "天"},
        {id: 10,name: "小时"},
    ])
const pinleiArr = ref([])
const pinmingArr = ref([])
const weightTypeList = ref([])
const price_configId = ref('')
const youhuiType = ref('')
const addType = ref('')
const zc_statusList = ref([
    {
      label: "未开始",
      value: "0"
    },
    {
      label: "进行中",
      value: "1"
    },
    {
      label: "已结束",
      value: "2"
    }
])
const formData = ref({
  name:'',
  zc_time:[],   //  有效时间
  goods_arr:'',   //  品名
  goods_type:'',
  zc_status:'0',
  weight_type:'',
  price_config:[   // 价格配置
    {
      price_type:2,
      name:'到站装卸费',
      price_config:[
        {
          transport_type: "2",
          price:'',  // 金额
          unit:'',   // 单位
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          is_jieti:0,
          flag:'',
        },
        {
          transport_type: "1",
          is_jieti:0,
          box: [
            {
              box_size: 1,
              price: '',
              unit: ""
            },
            {
              box_size: 2,
              price: '',
              unit: ""
            }
          ],
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          flag:''
        },
        {
          transport_type: "3",
          price:'',  // 金额
          unit:'',   // 单位
          limit_weight:'',   // 不足重量
          flag:'',
          is_jieti:0,
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
        },
      ],
    },
    {
      price_type:3,
      name:'发站装卸费',
      price_config:[
        {
          transport_type: "2",
          price:'',  // 金额
          unit:'',   // 单位
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          is_jieti:0,
          flag:'',
        },
        {
          transport_type: "1",
          is_jieti:0,
          box: [
            {
              box_size: 1,
              price: '',
              unit: ""
            },
            {
              box_size: 2,
              price: '',
              unit: ""
            }
          ],
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          flag:''
        },
        {
          transport_type: "3",
          price:'',  // 金额
          unit:'',   // 单位
          limit_weight:'',   // 不足重量
          flag:'',
          is_jieti:0,
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
        },
      ],
    },
    {
      price_type:10,
      name:'专用线使用费',
      price_config:[
        {
          transport_type: "2",
          price:'',  // 金额
          unit:'',   // 单位
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          is_jieti:0,
          flag:'',
        },
        {
          transport_type: "1",
          is_jieti:0,
          box: [
            {
              box_size: 1,
              price: '',
              unit: ""
            },
            {
              box_size: 2,
              price: '',
              unit: ""
            }
          ],
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          flag:''
        },
        {
          transport_type: "3",
          price:'',  // 金额
          unit:'',   // 单位
          limit_weight:'',   // 不足重量
          flag:'',
          is_jieti:0,
          is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
        },
      ]
    }
  ],    
})
const handleClone = (row)=>{
  request({
    url:'system/zc/copy?id=' + row.id,
    method: 'get',
    params:{},
  }).then(res=>{
    Message.success('复制成功')
    crudRef.value.refresh()
  })
}
const handleRadio = (e) =>{
  console.log(formData.value.price_config)
  formData.value.price_config[e].flag = !formData.value.price_config[e].flag
}
const handleBeforeOk = async ()=>{
  if(formData.value.zc_time == '' || formData.value.zc_time.length == 0){
    Message.error('请选择有效时间')
    return false
  }
  if(formData.value.goods_arr == ''){
    Message.error('请选择品名')
    return false
  }
  let obj = JSON.parse(JSON.stringify(formData.value))
  let arr = []
  obj.price_config.map((v,i)=>{
    if(v.flag){
      arr.push(v)
    }
  })
  console.log(arr)
  obj.price_config = arr
  if(addType.value == 1){
    let res = await systemZc.save(obj)
    if(res.code == 200){
      Message.success('新增成功！')
      crudRef.value.refresh()
      return true
    }else{
      Message.error(res.message)
      return false
    }
    
  }else{
    let res = await systemZc.update(obj.id,obj)
    if(res.code == 200){
      Message.success('编辑成功！')
      crudRef.value.refresh()
      return true
    }else{
      Message.error(res.message)
      return false
    }
    
  }
}

const handleXinzengs = ()=>{
  
  addType.value = 1
  price_configId.value = ''
  formData.value = {
    name:'',
    zc_time:[],   //  有效时间
    goods_arr:[],   //  品名
    goods_type:'',   //  品名
    zc_status:'0',
    weight_type:'',
    price_config:[   // 价格配置
      {
        price_type:2,
        name:'到站装卸费',
        flag:false,
        data:[
          {
            transport_type: "2",
            price:'',  // 金额
            unit:'',   // 单位
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            is_jieti:0,
          },
          {
            transport_type: "1",
            is_jieti:0,
            box: [
              {
                box_size: 1,
                price: '',
                unit: ""
              },
              {
                box_size: 2,
                price: '',
                unit: ""
              }
            ],
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
          {
            transport_type: "3",
            price:'',  // 金额
            unit:'',   // 单位
            limit_weight:'',   // 不足重量
            is_jieti:0,
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
        ],
      },
      {
        price_type:3,
        flag:false,
        name:'发站装卸费',
        data:[
          {
            transport_type: "2",
            price:'',  // 金额
            unit:'',   // 单位
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            is_jieti:0,
          },
          {
            transport_type: "1",
            is_jieti:0,
            box: [
              {
                box_size: 1,
                price: '',
                unit: ""
              },
              {
                box_size: 2,
                price: '',
                unit: ""
              }
            ],
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
          {
            transport_type: "3",
            price:'',  // 金额
            unit:'',   // 单位
            limit_weight:'',   // 不足重量
            is_jieti:0,
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
        ],
      },
      {
        price_type:10,
        flag:false,
        name:'专用线使用费',
        data:[
          {
            transport_type: "2",
            price:'',  // 金额
            unit:'',   // 单位
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            is_jieti:0,
          },
          {
            transport_type: "1",
            is_jieti:0,
            box: [
              {
                box_size: 1,
                price: '',
                unit: ""
              },
              {
                box_size: 2,
                price: '',
                unit: ""
              }
            ],
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
          {
            transport_type: "3",
            price:'',  // 金额
            unit:'',   // 单位
            limit_weight:'',   // 不足重量
            is_jieti:0,
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
        ]
      }
    ],    
  }
  showAdd.value = true
}
const handleEdits = (row)=>{
  addType.value = 2
  price_configId.value = row.price_config.price_type
  formData.value = {
    id:row.id,
    name:row.name,
    zc_time:[row.start_time,row.end_time],   //  有效时间
    goods_arr:row.goods_arr,   //  品名
    goods_type:row.goods_type,
    weight_type:row.weight_type,
    zc_status:row.zc_status + '',
    price_config:[   // 价格配置
      {
        price_type:2,
        flag:false,
        name:'到站装卸费',
        data:[
          {
            transport_type: "2",
            price:'',  // 金额
            unit:'',   // 单位
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            is_jieti:0,
            flag:'',
          },
          {
            transport_type: "1",
            is_jieti:0,
            box: [
              {
                box_size: 1,
                price: '',
                unit: ""
              },
              {
                box_size: 2,
                price: '',
                unit: ""
              }
            ],
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            flag:''
          },
          {
            transport_type: "3",
            price:'',  // 金额
            unit:'',   // 单位
            limit_weight:'',   // 不足重量
            flag:'',
            is_jieti:0,
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
        ],
      },
      {
        price_type:3,
        name:'发站装卸费',
        flag:false,
        data:[
          {
            transport_type: "2",
            price:'',  // 金额
            unit:'',   // 单位
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            is_jieti:0,
            flag:'',
          },
          {
            transport_type: "1",
            is_jieti:0,
            box: [
              {
                box_size: 1,
                price: '',
                unit: ""
              },
              {
                box_size: 2,
                price: '',
                unit: ""
              }
            ],
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            flag:''
          },
          {
            transport_type: "3",
            price:'',  // 金额
            unit:'',   // 单位
            limit_weight:'',   // 不足重量
            flag:'',
            is_jieti:0,
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
        ],
      },
      {
        price_type:10,
        flag:false,
        name:'专用线使用费',
        data:[
          {
            transport_type: "2",
            price:'',  // 金额
            unit:'',   // 单位
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            is_jieti:0,
            flag:'',
          },
          {
            transport_type: "1",
            is_jieti:0,
            box: [
              {
                box_size: 1,
                price: '',
                unit: ""
              },
              {
                box_size: 2,
                price: '',
                unit: ""
              }
            ],
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
            flag:''
          },
          {
            transport_type: "3",
            price:'',  // 金额
            unit:'',   // 单位
            limit_weight:'',   // 不足重量
            flag:'',
            is_jieti:0,
            is_goods:0,   // 0 没选择按品名装卸费率计算   1 选择按品名装卸费率计算
          },
        ]
      }
    ],    
  }
  handleChange(row.goods_type,2)
  formData.value.price_config.map((v,i)=>{
    row.price_config.map((vv,ii)=>{
      if(v.price_type == vv.price_type){
        formData.value.price_config[i] = vv
      }
    })
  })
  setTimeout(()=>{
    showAdd.value = true
  },200)
}

const handleChangePinMing = () =>{
  console.log(e)
}
const handleChange = (e,type)=>{
  
  if(type == 1){
    formData.value.goods_arr = ''
  }
  request({
    url:'goods/manage/index',
    method: 'get',
    params:{
      page:1,
      pageSize:1000,
      type_id:e
    },
  }).then(res=>{
    pinmingArr.value = res.data.items
    let arr = []
    pinmingArr.value.map((v,i)=>{
      arr.push(v.id)
    })
    if(type == 1){
      formData.value.goods_arr = arr
    }
    
  })
}
onMounted(()=>{
  commonApi.getDict("weight_type").then((res) => {
    let _data = res.data;
    _data.map((v,i)=>{
      v.value = v.key
    })
    weightTypeList.value = _data
  });
  request({
    url:'goods/type/index',
    method: 'get',
    params:{
      page:1,
      pageSize:1000
    },
  }).then(res=>{
    pinleiArr.value = res.data.items
  })
  request({
    url:'financial/unit/index',
    method: 'get',
    params:{
      openPage:false
    },
  }).then(res=>{
    unitList.value = res.data.items
  })
})
const handleTimeOk = (e)=>{
  console.log('选择时间：',e)
  formData.value.zc_time = e
}

const options = reactive({
  id: 'flyos_system_zc',
  rowSelection: {
    showCheckedAll: true
  },
  pk: 'id',
  operationColumn: true,
  operationWidth: 160,
  formOption: {
    viewType: 'modal',
    width: 600
  },
  api: systemZc.getList,
  recycleApi: systemZc.getRecycleList,
  add: {
    show: false,
    api: systemZc.save,
    auth: ['system:zc:save']
  },
  edit: {
    show: false,
    api: systemZc.update,
    auth: ['system:zc:update']
  },
  delete: {
    show: true,
    api: systemZc.deletes,
    auth: ['system:zc:delete'],
    realApi: systemZc.realDeletes,
    realAuth: ['system:zc:realDeletes']
  },
  recovery: {
    show: true,
    api: systemZc.recoverys,
    auth: ['system:zc:recovery']
  },
  import: {
    show: true,
    url: 'system/zc/import',
    templateUrl: 'system/zc/downloadTemplate',
    auth: ['system:zc:import']
  },
  export: {
    show: true,
    url: 'system/zc/export',
    auth: ['system:zc:export']
  }
})

const columns = reactive([
  {
    title: "",
    dataIndex: "id",
    formType: "input",
    addDisplay: false,
    editDisplay: false,
    hide: true,
    commonRules: {
      required: true,
      message: "请输入"
    }
  },
  {
    title: "政策名称",
    dataIndex: "name",
    formType: "input",
    search: true
  },
  
  {
    title: "有效时间",
    dataIndex: "zc_time",
    formType: "radio",
    search: true,
    showTime: true
  },
  {
    title: "参与计算重量",
    dataIndex: "weight_type",
    formType: "select",
    search: true,
    dict:{
      name: "weight_type",
			props: {
				label: "title",
				value: "key",
			},
			translation: true,
    }
  },
  {
    title: "政策状态",
    dataIndex: "zc_status",
    formType: "select",
    search: true,
    dict: {
      data: [
        {
          label: "未开始",
          value: "0"
        },
        {
          label: "进行中",
          value: "1"
        },
        {
          label: "已结束",
          value: "2"
        }
      ],
      translation: true
    }
  },
  {
    title: "价格配置",
    dataIndex: "price_config",
    formType: "input",
    hide: true
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    formType: "date",
    addDisplay: false,
    editDisplay: false,
    showTime: true
  },
])
</script>
<style>
.Radio{
  border: 1px solid rgba(0, 0, 0, .6);
  background: rgba(0, 0, 0, 0)
}
.actRadio{
  border: 1px solid rgba(22, 93, 255,1);
  background: rgba(22, 93, 255,1);
  color: #fff;
}
.priceBox{
  padding: 20px;
  background: rgba(0, 0, 0, .15);
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 10px;
}
.actPriceBox{
  background: rgba(22, 93, 255,.15);
  border: 1px solid rgba(22, 93, 255,1);
  padding: 20px;
  border-radius: 10px;
}
</style>
<script> export default { name: 'system:zc' } </script>